import React, { useState, useEffect } from "react";
import { Table, Button } from "antd";
import { loadDMList } from "../api/aiqiyi";

const columns = [
  {
    title: "序号",
    align: "center",
    width: 80,
    render: (text, record, index) => {
      /* console.log(text);
      console.log(record);
      console.log(index); */
      return <span>{index + 1}</span>;
    },
  },
  {
    title: "名字",
    dataIndex: "name",
    key: "name",
    width: 150,
  },
  {
    title: "图片",
    dataIndex: "imageUrl",
    width: 100,
    render: (text, record, index) => {
      return (
        <img
          src={record.imageUrl}
          alt={record.name}
          style={{
            width: "80px;max-width:80px",
            display: "block",
            margin: "0 auto",
          }}
        ></img>
      );
    },
  },
  {
    title: "简介",
    dataIndex: "description",
  },
];

function People() {
  const [isLoading, SetIsLoading] = useState(false);
  const [dataSource, setDS] = useState([]);
  const [page, setPage] = useState(1);
  useEffect(() => {
    loadDMList(page).then((res) => setDS(res.data.data.list));
  }, [page]);
  return (
    <div>
      <Button type="primary" onClick={() => SetIsLoading(!isLoading)}>
        加载
      </Button>
      <Table
        loading={isLoading}
        bordered={true}
        dataSource={dataSource}
        columns={columns}
        pagination={{
          defaultCurrent: 1,
          total: 160,
          defaultPageSize: 16,
          onChange: (p) => setPage(p),
        }}
      />
      ;
    </div>
  );
}

export default People;
